
<template>
  <div class="meng-editor-header-list" >
      <ul>
        <li style="border-bottom:1px solid lightgray">设置标题</li>
        <li onmousedown="event.preventDefault();"  @click="handleHeader('<h1>')">
          <h1>H1</h1>
        </li>
        <li onmousedown="event.preventDefault();"  @click="handleHeader('<h2>')">
          <h2>H2</h2>
        </li>
        <li onmousedown="event.preventDefault();"  @click="handleHeader('<h3>')">
          <h3>H3</h3>
        </li>
        <li onmousedown="event.preventDefault();"  @click="handleHeader('<h4>')">
          <h4>H4</h4>
        </li>
        <li onmousedown="event.preventDefault();"  @click="handleHeader('<h5>')">
          <h5>H5</h5>
        </li>
        <li onmousedown="event.preventDefault();"  @click="handleHeader('<h6>')">
          <h6>H6</h6>
        </li>
      </ul>
  </div>
</template>

<script>
import mixin from '../../mixins/index'
export default {
    name: 'header-list',
    mixins: [mixin],
    methods: {
      handleHeader(command){
        this.execCommand("formatBlock",false,command)
        this.$parent.show = false;
      }
    }
}
</script>

<style>
.meng-editor-header-list {
    width: 100px;
    height: auto;
    background: white;
    border: 1px solid lightgray;
}
.meng-editor-header-list ul {
  width: 100%;
  height: 100%;
  list-style: none;
  padding:0;
}
.meng-editor-header-list ul li {
   width: 100%;
   height: 30px;
   text-align: center;
   line-height: 30px;
}
.meng-editor-header-list ul li:hover {
  background: rgb(220, 238, 244);
}
</style>